<template>
  <div ref="app" id="app">
    <router-view />
    <video ref="dangerMp3" loop="loop">
      <source src="@/assets/danger.mp3" type="video/mp4" />
    </video>
  </div>
</template>

<script>
import { monitorPartnersHasUnusual } from "@/api/videos/monitorPartners";
import { getToken } from "@/utils/auth";
export default {
  name: "App",
  data() {
    return {
      audio: "",
      muted: false,
    };
  },
  mounted() {
    this.monitoringUnusual();
    setInterval(() => {
      this.monitoringUnusual();
    }, 3000);
  },
  methods: {
    monitoringUnusual() {
      if (!getToken()) {
        return;
      }
      monitorPartnersHasUnusual().then((res) => {
        let unusualPartners = res.data;
        if (unusualPartners.length != 0) {
          console.log("播放...");
          this.$refs.dangerMp3.play();
          let partnersNames = unusualPartners
            .map((item) => item.partnerName)
            .join("，");
          this.$notify.error({
            title: "警告",
            message: `设备组：${partnersNames}，出现警报，请检查！`,
            type: "warning",
          });
        } else {
          this.$refs.dangerMp3.pause();
        }
      });
    },
  },
};
</script>

<style lang="scss">
html {
  overflow: hidden;
}
.operators {
  margin-bottom: 16px;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  text-align: left;
}

.el-dialog__body {
  padding: 20px 20px 40px 20px;
}

.el-loading-spinner {
  font-size: 80px;
  font-weight: bold;
}
//修改文字的大小
.el-loading-mask .el-loading-spinner .el-loading-text {
  font-size: 18px;
}

::v-deep .el-upload--picture-card {
  width: 100px !important;
  height: 100px !important;
  line-height: 100px !important;
  img {
    width: 100% !important;
    height: 100% !important;
  }
  .img-uploader-icon {
    width: 100px !important;
    height: 100px !important;
    line-height: 100px !important;
    position: absolute;
    left: 0;
  }
}

.dialog-btns {
  text-align: center;
  margin-top: 30px;
}

.pagination-container {
  text-align: right;
}
</style>
  